<template>
  <drag-modal
    title="查看"
    :width="450"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form" :label-col="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
        <div class="fold">
          <a-form-model-item
            label="分组名称"
            prop="name"
          >
            <span>{{form.name}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="分组编码"
            prop="code"
          >
            <span>{{form.code}}</span>
          </a-form-model-item>
          <a-form-model-item
            label="备注"
            prop="remarks"
          >
            <span>{{form.remarks}}</span>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-spin>
    <template slot="footer">
      <a-button @click="cancel">关闭</a-button>
    </template>
  </drag-modal>
</template>

<script>
import {dictGroupService} from '@/services'

export default {
  name: 'QueryModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      form: {
        name: undefined,
        code: undefined,
        remarks: undefined
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    queryAction(val) {
      this.loading = true
      const params = {
        id: val
      }
      dictGroupService.query(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.form = result.data
        }
      }).finally(this.loading = false)
    },
  }
}
</script>
